import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image } from '@tarojs/components'
import { DNavBar } from '@/components'
import classNames from 'classnames'
import sdk from '@/common/sdk'
import './transportplatform.scss'

const bgImages = require('../assets/bgImages.png')

export default class TransportplatformBox extends Component {

    constructor(props) {
        super(props)
        this.state = {
            title: '物流中心',
            list1: [
                {
                    img: require("../assets/register.png"),
                    text: '车辆登记',
                    url: '/pages/carregister/carregister'
                },
                {
                    img: require("../assets/car.png"),
                    text: '我的车辆',
                    url: '/pages/transportmgr/transportmgr'
                },
                {
                    img: require("../assets/release.png"),
                    text: '发布物流',
                    url: '/pages/logisticsform/logisticsform'
                },
                {
                    img: require("../assets/logistics.png"),
                    text: '我的物流',
                    url: '/pages/mylogistics/mylogistics'
                }
            ],
            list2: [

                {
                    img: require("../assets/order.png"),
                    text: '待接单',
                    active: 0,
                    number: 0
                },
                {
                    img: require("../assets/examine.png"),
                    text: '待验车',
                    active: 1,
                    number: 0
                },
                {
                    img: require("../assets/xollection.png"),
                    text: '确认合同',
                    active: 2,
                    number: 0
                },
                {
                    img: require("../assets/end.png"),
                    text: '已完结',
                    active: 3,
                    number: 0
                }
            ],
            list3: [
                {
                    img: require("../assets/order.png"),
                    text: '待支付',
                    url: '/pages/consignment/consignment?active=0',
                    number: 0
                },
                {
                    img: require("../assets/order.png"),
                    text: '待接单',
                    url: '/pages/consignment/consignment?active=1',
                    number: 0
                },
                {
                    img: require("../assets/examine.png"),
                    text: '待验车',
                    url: '/pages/consignment/consignment?active=2',
                    number: 0
                },
                {
                    img: require("../assets/order.png"),
                    text: '上传合同',
                    url: '/pages/consignment/consignment?active=3',
                    number: 0
                },
                {
                    img: require("../assets/end.png"),
                    text: '已完结',
                    url: '/pages/consignment/consignment?active=4',
                    number: 0
                }
            ]
        }
    }

    componentDidShow() {
        sdk.setTitleInfo(this.state.title)
    }

    applyHandle() {
        Taro.navigateTo({
            url: '/pages/applymoney/applymoney'
        })
    }

    onActiveHandle(url) {
        Taro.navigateTo({
            url
        })
    }

    onActiveOrder(i) {
        Taro.navigateTo({
            url: `/pages/shiporder/shiporder?active=${i}`
        })
    }

    render() {
        const { title, list1, list2, list3 } = this.state
        return (
            <View className="b_transportplatform">
                <Image src={bgImages} className='b_transportplatform__images'></Image>
                <DNavBar title={title} className='b_transportplatform__nav'></DNavBar>
                <View className="b_transportplatform__box">
                    <View className='b_transportplatform__header'>
                        <View className='b_transportplatform__header_left'>
                            <View className='b_transportplatform__header_left__title'>承运订单总成交额</View>
                            <View className='b_transportplatform__header_left__money'>5000<Text className='item_money__text'>.00元</Text></View>
                        </View>
                        <View className='b_transportplatform__header_right' onClick={this.applyHandle.bind(this)}>提现</View>
                    </View>
                    <View className="b_transportplatform__content">
                        <View className='b_transportplatform__content_title'>运输管理</View>
                        <View className='b_transportplatform__content_box'>
                            {
                                list1 && list1.map((item, i) => {
                                    return <View className='b_transportplatform__content-list' key={i} onClick={this.onActiveHandle.bind(this, item.url)}>
                                        <Image src={item.img} className='b_transportplatform__content-list_img'></Image>
                                        <View className='b_transportplatform__content-list_text'>{item.text}</View>
                                    </View>
                                })
                            }
                        </View>
                    </View>
                    <View className="b_transportplatform__content">
                        <View className='b_transportplatform__content_title'>承运订单</View>
                        <View className='b_transportplatform__content_box'>
                            {
                                list2 && list2.map((item, i) => {
                                    return <View className='b_transportplatform__content-listbox'>
                                        {
                                            item.number > 0 && <Text className='b_transportplatform__content-text'>{item.number > 99 ? '99+' : item.number}</Text>
                                        }
                                        <View className='b_transportplatform__content-list' key={i} onClick={this.onActiveOrder.bind(this, item.active)}>
                                            <Image src={item.img} className='b_transportplatform__content-list_img'></Image>
                                            <View className='b_transportplatform__content-list_text'>{item.text}</View>
                                        </View>
                                    </View>
                                })
                            }
                        </View>
                    </View>
                    <View className="b_transportplatform__content">
                        <View className='b_transportplatform__content_title'>托运订单</View>
                        <View className='b_transportplatform__content_box'>
                            {
                                list3 && list3.map((item, i) => {
                                    return <View className='b_transportplatform__content-listbox'>
                                        {
                                            item.number > 0 && <Text className='b_transportplatform__content-text'>{item.number > 99 ? '99+' : item.number}</Text>
                                        }
                                        <View className='b_transportplatform__content-list' key={i} onClick={this.onActiveHandle.bind(this, item.url)}>
                                            <Image src={item.img} className='b_transportplatform__content-list_img'></Image>
                                            <View className='b_transportplatform__content-list_text'>{item.text}</View>
                                        </View>
                                    </View>
                                })
                            }
                        </View>
                    </View>
                </View>
            </View>
        )
    }
}
